﻿@model string
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="../../Scripts/mxClient.js"></script>
    <script type="text/javascript">
        function main(container, model) {
            if (!mxClient.isBrowserSupported()) {
                mxUtils.error('Browser is not supported!', 200, false);
            }
            else {
                mxRectangleShape.prototype.crisp = true;
                var graph = new mxGraph(container);
                new mxRubberband(graph);

                var style = graph.getStylesheet().getDefaultVertexStyle();
                style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
                style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
                style[mxConstants.STYLE_FONTSIZE] = '10';

                //debugger;
                var parent = graph.getDefaultParent();
                graph.getModel().beginUpdate();
                try {
                    var vertexArr = new Array();
                    for (var i = 0; i < model.lstProcessNode.length; i++) {
                        var style = model.lstProcessNode[i].Shape;
                        if (model.HasDocument) {
                            if (model.HandleState == "2") {
                                style += "fillColor=green;";
                            }
                            else {
                                if (model.lstProcessNode[i].OrderNo < model.CurrentOrderNo) {
                                    style += "fillColor=green;";
                                }
                                else if (model.lstProcessNode[i].OrderNo == model.CurrentOrderNo) {
                                    if (model.HandleState == "0" || model.HandleState == "1") {
                                        style += "fillColor=blue;";
                                    }
                                    else {
                                        style += "fillColor=red;";
                                    }
                                }                   
                            }
                        } 
                        var vertex = graph.insertVertex(parent, null, model.lstProcessNode[i].NodeName, model.lstProcessNode[i].LocationX, model.lstProcessNode[i].LocationY, model.lstProcessNode[i].Width, model.lstProcessNode[i].Height, style);
                        vertexArr[model.lstProcessNode[i].NodeCode] = vertex;
                    }

                    for (var i = 0; i < model.lstProcessNode.length; i++) {
                        var style = "";
                        if (model.HasDocument) {
                            if (model.HandleState == "2") {
                                style += "strokeColor=green;";
                            }
                            else {
                                if (model.lstProcessNode[i].OrderNo <= model.CurrentOrderNo) {
                                    style += "fillColor=green;";
                                }
                            }
                        }
                        var currentNodeCode = model.lstProcessNode[i].NodeCode;
                        var nextNodeCode = model.lstProcessNode[i].NextNodeCode;
                        if (nextNodeCode != "") {
                            graph.insertEdge(parent, null, '', vertexArr[currentNodeCode], vertexArr[nextNodeCode], style);
                        }
                    }
                }
                finally {
                    graph.getModel().endUpdate();
                }
            }
        };
    </script>
</head>
<body onload="main(document.getElementById('graphContainer'),@Model)">
    <div style="width: 100%; height: 30px">
    <img alt="" src="../../resources/images/workflow.bmp"/>
    </div>
    <div id="graphContainer" style="overflow: hidden; width: 100%; height: 600px;">
    </div>
</body>
</html>
